<template>
  <div id="app">
    <div id="nav">
      <div class="left">
        <a href="#" id="sousuo1">
          <span class="iconfont icon-1-copy"></span>
        </a>
        <a href="#">
          <span class="iconfont icon-sousuo"></span>
        </a>
      </div>
      <div class="middle">
        <router-link to="/">
          <img src="https://img.fishfay.com/theme/images/logo/logo-anta-r-02.svg" alt>
        </router-link>
      </div>
      <div class="right">
        <router-link to="/shoppingcar">
          <img src="https://img.fishfay.com/theme/images/icons/cart-b.svg" alt class="gouwu">
        </router-link>
        <router-link to="/mine">
          <span class="iconfont icon-geren" id="geren"></span>
        </router-link>
      </div>
      <!-- <router-link to="/about">About</router-link> -->
    </div>
    <router-view></router-view>
  </div>
</template>

<style scoped>
#nav {
  width: 100%;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: white;
}
#nav a,
span {
  display: inline-block;
  vertical-align: middle;
}
#nav .middle {
  width: 55px;
  height: 30px;
}
.gouwu {
  width: 27px;
  height: 22px;
}
.sousuo {
  width: 26px;
  height: 26px;
}
#sousuo1 {
  width: 26px;
  height: 26px;
  margin-right: 10px;
}
#geren {
  margin-left: 10px;
}
#nav .middle img {
  width: 100%;
  height: 100%;
}
</style>

